<template>
  <IndependenceForm ref="form" :submit-fun="submitFun">
    <el-button
      type="primary"
      style="margin-bottom: 10px; margin-left: 10px"
      :loading="productButtonLoading"
      @click="showSelectProduct"
    >
      选择货物
    </el-button>
    <page-region title="基本信息">
      <SingleForm ref="baseForm" v-model="baseData" v-bind="baseFormInfo" />
    </page-region>
    <page-region title="属性规格">
      <SingleForm v-if="specSelectVisible" ref="specInfoForm" v-model="specInfoData" v-bind="specInfo" />
    </page-region>
    <template #specSelect="{ cellRenderFrame, cellRenderData }">
      <SpecSelect ref="specSelect" v-model="cellRenderData[cellRenderFrame.key]" :productVo />
    </template>
    <template #attrSelect="{ cellRenderFrame, cellRenderData }">
      <GoodsAttrValue ref="attSelect" v-model="cellRenderData[cellRenderFrame.key]" :productVo />
    </template>
    <template #productImage="{ cellRenderFrame, cellRenderData }">
      <ProductImageUpload ref="productImage" v-model="cellRenderData[cellRenderFrame.key]" />
    </template>
    <ProductSelect ref="productSelect" @save-success="selectProductHandle" />
  </IndependenceForm>
</template>
<script setup lang="ts">
import {
  MIndependenceForm as IndependenceForm,
  MPageRegion as PageRegion,
  MSingleForm as SingleForm,
  type SingleFormProps
} from "page-com";
import { shallowReactive, useTemplateRef, ref, provide, getCurrentInstance, shallowRef } from "vue";
import { errorMsg, successMsg } from "@/utils/message";
import ProductSelect from "./ProductSelect.vue";
import SpecSelect from "./SpecSelect.vue";
import GoodsAttrValue from "./GoodsAttrValue.vue";
import ProductImageUpload from "./ProductImageUpload.vue";
import { addGoods } from "@/api/product/goodsApi";
import { uploadFun } from "@/utils/utils";
import { getServiceSelect } from "@/api/product/serviceApi";
import { getProductDetail } from "@/api/product/productApi";
const form = useTemplateRef("form");
async function submitFun(data) {
  let res = await addGoods(data);
  if (res.code == RESPONSE_CODE.SUCCESS) {
    successMsg("添加成功");
    form.value.goBack();
  }
}
const productVo = shallowRef<ShopProductDetailVo>();
const specInfoData = ref({});
const baseData = ref({ goodsName: "" });
const baseFormInfo = shallowReactive<Partial<SingleFormProps>>({
  items: [
    {
      frameType: "input",
      key: "goodsName",
      label: "商品名称",
      validations: {
        required: true
      }
    },
    {
      frameType: "input",
      key: "goodsDesc",
      label: "商品描述"
    },
    {
      frameType: "input",
      key: "price",
      label: "售价",
      validations: {
        required: true,
        float2: true
      }
    },
    {
      frameType: "multiSelect",
      key: "serviceIds",
      label: "商品服务",
      options: getServiceSelect().then(v => v.data)
    },
    {
      label: "封面图",
      frameType: "singleUpload",
      key: "coverImage",
      uploadUrl: "/user/uploadFile",
      uploadFun: uploadFun,
      validations: {
        required: true
      }
    },
    {
      frameType: "slot",
      slot: "productImage",
      key: "detailImages",
      label: "详情图",
      value: [],
      validations: {
        required: true
      }
    }
  ]
});
const specInfo = shallowReactive<Partial<SingleFormProps>>({
  items: [
    {
      frameType: "slot",
      slot: "attrSelect",
      key: "attrValues",
      label: "属性配置",
      value: []
    },
    {
      frameType: "slot",
      slot: "specSelect",
      key: "specInfos",
      label: "规格配置",
      value: [],
      validations: {
        required: true
      }
    }
  ]
});
const productSelect = useTemplateRef("productSelect");
function showSelectProduct() {
  productSelect.value.show();
  productButtonLoading.value = true;
}
const specSelectVisible = ref(false);
const specSelect = useTemplateRef("specSelect");
const productButtonLoading = ref(false);
async function selectProductHandle(data: ShopProductVo) {
  let res = await getProductDetail(data.id);
  if (res.code === RESPONSE_CODE.SUCCESS) {
    productVo.value = res.data;
    baseData.value.goodsName = res.data.productName;
    specSelectVisible.value = true;
  } else {
    errorMsg("获取货物信息失败");
  }
  productButtonLoading.value = false;
}
</script>
